<template>
  <div class='order'>
    <div class="shaixuan">
      <div v-for="(item,index) in order" @click="change(index)" :key="index" :class="{active:label-index==0}">{{item.name}}</div>
    </div>
    <div class="content">
      <div v-for="(item,index) in content" :key="index">
        <div class="bg" :style="{backgroundImage:'url('+item.pho+')'}"></div>
        <div class='txt'>
          <div class="title">{{item.txt}}</div>
          <div class="day">{{item.day}}</div>
          <div class="logo">
            <div class="red" v-for="i in item.logred" :key='i'>{{i}}</div>
            <div class="yellow" v-for="i in item.logyellow" :key='i'>{{i}}</div>
          </div>
        </div>
        <div class="bottom">
          <div class="money">￥<span>{{item.money}}</span>起</div>
          <div class="number"><span>{{item.number}}</span>人已报名</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Order',
  data () {
    return {
      order: this.$store.getters.param.order,
      content: this.$store.getters.param.order[0].content,
      label: 0
    }
  },
  methods: {
    change (ele) {
      this.content = this.$store.getters.param.order[ele].content
      this.label = ele
    }
  }
}
</script>
<style scoped lang='less'>
.shaixuan{
  display: flex;
  height: 46px;
  border-bottom:1px solid #dddddd;
  &>div{
    margin:8px 0 8px 20px;
    padding:0 10px;
    height: 30px;
    line-height:30px;
    border-radius:30px;
  }
  &>.active{
    background-color: #fff5cf;
    font-weight:bold;
  }
}
.content{
  background-color: #f5f5f5;
  // display: flex;
  padding: 10px 8px;
  // justify-content: space-between;
  &>div{
    // box-sizing:border-box;
    // margin:1.5%;
    padding:0 2%;
    float:left;
    width: 46%;
    background-color: #fff;
    border-radius:10px;
    .bg{
      width: 100%;
      height: 150px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      border-radius:10px 10px 0 0 ;
    }
    .txt{
      text-align: left;
      padding:0 10px;
      .title{
        margin-top:15px;
        font-size:16px;
        font-weight:bold;
        /*多行文本溢出显示省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .day{
        color:#999;
        margin:3px 0;
        font-size:10px;
      }
      .logo{
        display: flex;
        &>div{
          border-radius:5px;
          margin-right:10px;
          padding:0 3px;
          font-size:10px;
        }
        .red{
          border:1px solid red;
          color:red;
        }
        .yellow{
          border:1px solid #e39e30;
          color:#e39e30;
        }
      }
    }
    .bottom{
      padding:0 10px;
      margin:20px 0 20px;
      &::after{
        content: "";
        display: block;
        clear:both;
      }
      .money{
        color:#ff7100;
        float:left;
        &>span{
          font-size:20px;
          font-weight: bold;
        }
      }
      .number{
        float:right;
        color:#999;
      }
    }
  }
}
</style>
